<!DOCTYPE html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    <!-- bootstrap-css -->
    <link rel="stylesheet" href="/static/admin/css/zz/bootstrap.css">
    <!-- //bootstrap-css -->
    <!-- Custom CSS -->
    <link href="/static/admin/css/zz/style.css" rel='stylesheet' type='text/css' />
    <!-- font CSS -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <!-- font-awesome icons -->
    <link rel="stylesheet" href="/static/admin/css/zz/font.css" type="text/css"/>
    <link href="/static/admin/css/zz/font-awesome.css" rel="stylesheet">
    <!-- //font-awesome icons -->
    <script>
        (function () {
            var js;
            if (typeof JSON !== 'undefined' && 'querySelector' in document && 'addEventListener' in window) {
                js = '/static/admin/js/zz/jquery.min.js';
            } else {
                js = '/static/admin/js/zz/jquery.min.js';
            }
            document.write('<script src="' + js + '"><\/script>');
        }());
    </script>
    <script src="/static/admin/js/zz/modernizr.js"></script>
    <script src="/static/admin/js/zz/jquery.cookie.js"></script>
    <script src="/static/admin/js/zz/screenfull.js"></script>
    <script>
        $(function () {
            $('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

            if (!screenfull.enabled) {
                return false;
            }



            $('#toggle').click(function () {
                screenfull.toggle($('#container')[0]);
            });
        });
    </script>
    <!-- charts -->
    <script src="/static/admin/js/zz/raphael-min.js"></script>
    <script src="/static/admin/js/zz/morris.js"></script>
    <link rel="stylesheet" href="/static/admin/css/zz/morris.css">
    <!-- //charts -->
    <!--skycons-icons-->
    <script src="/static/admin/js/zz/skycons.js"></script>
    <!--//skycons-icons-->
</head>
<body class="dashboard-page">
<script>
    var theme = $.cookie('protonTheme') || 'default';
    $('body').removeClass (function (index, css) {
        return (css.match (/\btheme-\S+/g) || []).join(' ');
    });
    if (theme !== 'default') $('body').addClass(theme);
</script>
    <div class="main-grid">
        <div class="agile-grids">
            <div class="col-md-4 charts-right">
                <!-- area-chart -->
                <div class="area-grids">
                    <div class="area-grids-heading">
                        <h3>用户分类</h3>
                    </div>
                    <div id="graph4"></div>
                    <script>
                        Morris.Donut({
                            element: 'graph4',
                            data: [
                                {value: {$bu_user}, label: 'buser', formatted: '商业用户 {$bu_user}%' },
                                {value: {$or_user}, label: 'ouser', formatted: '普通用户 {$or_user}%' },
                            ],
                            formatter: function (x, data) { return data.formatted; }
                        });
                    </script>

                </div>
                <!-- //area-chart -->
            </div>
            <div class="col-md-8 agile-bottom-right">
                <div class="agile-bottom-grid">
                    <div class="area-grids-heading">
                        <h3>活跃用户排行</h3>
                    </div>
                    <div id="graph6"></div>
                    <script>
                        // Use Morris.Bar
                        Morris.Bar({
                            element: 'graph6',
                            data: [
                                {x: '{$mess_name[7]}', y: {$mess_count[7]}},
                                {x: '{$mess_name[6]}', y: {$mess_count[6]}},
                                {x: '{$mess_name[5]}', y: {$mess_count[5]}},
                                {x: '{$mess_name[4]}', y: {$mess_count[4]}},
                                {x: '{$mess_name[3]}', y: {$mess_count[3]}},
                                {x: '{$mess_name[2]}', y: {$mess_count[2]}},
                                {x: '{$mess_name[1]}', y: {$mess_count[1]}},
                                {x: '{$mess_name[0]}', y: {$mess_count[0]}}
                            ],
                            xkey: 'x',
                            ykeys: ['y'],
                            labels: ['Y'],
                            barColors: function (row, series, type) {
                                if (type === 'bar') {
                                    var red = Math.ceil(255 * row.y / this.ymax);
                                    return 'rgb(' + red + ',0,0)';
                                }
                                else {
                                    return '#000';
                                }
                            }
                        });
                    </script>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>

                    <script>
                        var icons = new Skycons({"color": "#fcb216"}),
                            list  = [
                                "partly-cloudy-day"
                            ],
                            i;

                        for(i = list.length; i--; )
                            icons.set(list[i], list[i]);
                        icons.play();
                    </script>
                    <script>
                        var icons = new Skycons({"color": "#000"}),
                            list  = [
                                "clear-night","partly-cloudy-night", "cloudy", "clear-day", "sleet", "snow", "wind","fog"
                            ],
                            i;

                        for(i = list.length; i--; )
                            icons.set(list[i], list[i]);
                        icons.play();
                    </script>
                </div>
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>

</section>
<script src="/static/admin/js/zz/bootstrap.js"></script>
<script src="/static/admin/js/zz/proton.js"></script>

</body>
</html>
